<template>
    <div class="bigbox">
        <div class="login-box">
            <el-form ref="formRef" :rules="data.rules" :model="data.userForm" style="width: 370px">
                <div style="margin-bottom: 30px;font-size:28px;color: black;font-weight: bold;text-align: center">欢 迎 登
                    录</div>
                <el-form-item label="账号" prop="uname">
                    <el-input v-model="data.userForm.uname" size="large" placeholder="请输入账号"
                        prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="data.userForm.password" show-password size="large" placeholder="请输入密码"
                        prefix-icon="Lock"></el-input>
                </el-form-item>
                <div style="margin-bottom: 14px">
                    <el-button @click="login" size="large" style="width: 100%" type="primary">登 录</el-button>
                </div>
                <div style="text-align: right">还没有账号? 请<a style="color: #0742b1;text-decoration: none"
                        href="/registry">注册</a></div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const data = reactive({
    userForm: { uname: '', password: '' },  // 用于登录
    // 定义规则
    rules: {
        uname: [{ required: true, message: "请输入账号", trigger: 'blur' }],
        password: [{ required: true, message: "请输入密码", trigger: 'blur' }],
    }
});
const formRef = ref();  // 用于获取表单内容并触发表单自定义规则
let userStore = useUserStore()

// 登录
function login() {
    formRef.value.validate((valid) => {  // 调用 validate 方法触发验证
        if (valid) {
            axios.post('/api/login', data.userForm).then(res => {
                if (res.data.success) {
                    ElMessage.success("登录成功");
                    // 保存 token 和用户信息 到 pinia
                    userStore.token = res.data.data.token;
                    userStore.loginUser = res.data.data.user
                    router.push({ name: 'home' })  //跳转到首页
                } else {
                    ElMessage.error(res.data.message)  //传入定义的报错信息
                    data.userForm = {}
                }
            })
        } else {
            ElMessage.error("请输入账号或密码!!");
        }
    });
}

</script>

<style scoped>
/* 更换背景图片将 url路径修改即可 */
.bigbox {
    background-image: url(../assets/login.jpg);
    height: 100vh;
    overflow: hidden;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.login-box {
    width: 540px;
    height: 400px;
    background-color: antiquewhite;
    position: absolute;
    right: 100px;
    bottom: 210px;
    /* 半透明 */
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>